<template>
  <div>
    <div class="tabbarItem" @click="onClick">
      <div v-if="isTabbar" class="tabbarItem_img">
        <slot name="img_s"></slot>
      </div>
      <div v-else class="tabbarItem_img">
        <slot name="img"></slot>
      </div>
      <div :class="isTabbar ? 'tabbarItem_title_s' : 'tabbarItem_title'">
        <slot name="title"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    path: {
      type: String,
      required: true,
    },
  },
  computed: {
    isTabbar: function () {
      return this.path === this.$route.path;
    },
  },
  methods: {
    onClick() {
      this.$router.push(this.path);
    },
  },
};
</script>

<style>
.tabbarItem {
  width: 100%;
}
.tabbarItem_img {
  width: 100%;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tabbarItem_img img {
  width: 1.2rem;
  height: 1.2rem;
}
.tabbarItem_title {
  width: 100%;
  height: 0.6rem;
  color: gray;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tabbarItem_title_s {
  width: 100%;
  height: 0.6rem;
  color: red;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>